<template>
  <el-form-item v-if="label" :prop="name" :label="label">
    <template v-if="readonly">
      <edit-item-show
        ref="editItemShow"
        v-model="editValue"
        :dictName="dictName"
        :ellipsis="ellipsis"
        :range="range"
        :showSecond="showSecond"
        :type="type"
        :unit="unit"
        :multiple="multiple"
        :size="size"
      />
    </template>
    <template v-else>
      <!-- 简单组件 -->
      <base-input-item
        v-if="compType == 'base'"
        v-model="editValue"
        :max="max"
        :min="min"
        :maxlength="maxlength"
        :minlength="minlength"
        :placeholder="placeholder"
        :range="range"
        :size="size"
        :step="step"
        :type="type"
        :width="width"
      />
      <!-- 复杂组件 -->
      <dict-input-item
        v-if="compType == 'dict'"
        v-model="editValue"
        :max="max"
        :min="min"
        :maxlength="maxlength"
        :minlength="minlength"
        :placeholder="placeholder"
        :range="range"
        :size="size"
        :step="step"
        :type="type"
        :dictName="dictName"
        :multiple="multiple"
        :filter="filter"
        :autoUrl="autoUrl"
        :autoParams="autoParams"
        :width="width"
      />
      <!-- 上传组件 -->
      <upload-input-item
        v-if="compType == 'upload'"
        v-model="editValue"
        :accept="accept"
        :multiple="multiple"
        :type="type"
        :uploadUrl="uploadUrl"
      />
      <!-- 自定义组件,除了地址组件其他目前不能用 TODO: -->
      <custom-input-item
        v-if="compType == 'custom'"
        v-model="editValue"
        :maxlength="maxlength"
        :minlength="minlength"
        :placeholder="placeholder"
        :size="size"
        :type="type"
        :width="width"
      />
    </template>
  </el-form-item>
  <div v-else>
    <template v-if="readonly">
      <edit-item-show
        :dictName="dictName"
        :ellipsis="ellipsis"
        :range="range"
        :showSecond="showSecond"
        :type="type"
        :unit="unit"
        :value="editValue"
        :multiple="multiple"
        :size="size"
      />
    </template>
    <template v-else>
      <!-- 简单组件 -->
      <base-input-item
        v-if="compType == 'base'"
        v-model="editValue"
        :max="max"
        :min="min"
        :maxlength="maxlength"
        :minlength="minlength"
        :placeholder="placeholder"
        :showSecond="showSecond"
        :range="range"
        :size="size"
        :step="step"
        :type="type"
        :width="width"
      />
      <!-- 复杂组件 -->
      <dict-input-item
        v-if="compType == 'dict'"
        v-model="editValue"
        :max="max"
        :min="min"
        :maxlength="maxlength"
        :minlength="minlength"
        :placeholder="placeholder"
        :range="range"
        :size="size"
        :step="step"
        :type="type"
        :dictName="dictName"
        :multiple="multiple"
        :filter="filter"
        :autoUrl="autoUrl"
        :autoParams="autoParams"
        :width="width"
      />
      <!-- 上传组件 -->
      <upload-input-item
        v-if="compType == 'upload'"
        v-model="editValue"
        :accept="accept"
        :multiple="multiple"
        :type="type"
        :uploadUrl="uploadUrl"
      />
      <!-- 自定义组件,除了地址组件其他目前不能用 TODO: -->
      <custom-input-item
        v-if="compType == 'custom'"
        v-model="editValue"
        :maxlength="maxlength"
        :minlength="minlength"
        :placeholder="placeholder"
        :size="size"
        :type="type"
        :width="width"
      />
    </template>
  </div>
</template>

<script>
import BaseInputItem from "@comp/form/items/BaseInputItem.vue";
import CustomInputItem from "@comp/form/items/CustomInputItem.vue";
import DictInputItem from "@comp/form/items/DictInputItem.vue";
import EditItemShow from "@comp/form/EditItemShow.vue";
import UploadInputItem from "@comp/form/items/UploadInputItem.vue";
const type = [
  "text",
  "textarea",
  "password",
  "switch",
  "number",
  "slider",
  "rate",
  "color",
  "time",
  "date",
  "datetime",
  "year",
  "month",
  "week",
  "radio",
  "check",
  "select",
  "upload",
  "img",
  "cascader",
  "auto",
  "addre",
  "sfzh",
  "email",
  "mobile",
  "hide"
];
export default {
  components: {
    BaseInputItem,
    DictInputItem,
    UploadInputItem,
    CustomInputItem,
    EditItemShow,
  },
  model:{
    methods:["change"]
  },
  props: {
    name:String,
    //文本标签
    label: { type: String },
    //v-model绑定
    value: {
      type: [String, Number, Array, Boolean, Date, Object ],
      required: true,
    },
    //是否只读
    readonly: { type: Boolean, default: false },
    //类型
    type: {
      type: String,
      validator: function(value) {
        return type.findIndex((item) => item == value) >= 0;
      },
    },
    //大小，支持'medium','small','mini',默认medium
    size: {
      type: String,
      validator: function(value) {
        return (
          ["medium", "small", "mini"].findIndex((item) => item == value) >= 0
        );
      },
      default: "medium",
    },
    width:{type:String,default:'100%'},
    //输入前提示语
    placeholder: String,
    //最大值，最小值，只有slider,number有效
    max: Number,
    min: Number,
    //原生属性，最大长度，最小长度
    maxlength: Number,
    minlength: Number,
    //是否为时间段,time,date,datetime,month有效
    range: { type: Boolean, default: false },
    //是否显示秒
    showSecond: { type: Boolean, default: false },
    //slider的步长
    step: { type: Number, default: 1 },
    //字典名称，select,radio,check,cascader可用
    dictName: String,
    /**
     * TODO: (dictName) 需要建立一个缓存机制，每次去缓存中读取字典信息，如果缓存中没有，则自动去后台加载
     */
    //select,cascader是否可以多选，upload,img是否可以选择多个文件
    multiple: { type: Boolean, default: false },
    checkStrictly: { type: Boolean, default: false },
    //upload,img 上传地址
    uploadUrl: String,
    //upload的文件类型，目前有 img,office,pdf,all
    accept: { type: String, default: "all" },
    //select,radio,check,cascader加载字典时的过滤条件，返回list
    filter: {
      type: Function,
      default: (list) => {
        return list;
      },
    },
    //auto组件的获取列表地址
    autoUrl: String,
    //auto组件获取列表的查询条件参数
    autoParams: { type: Object, default: () => {} },
    //只读时，达到一定长度显示省略号
    ellipsis: Number,
    unit: String,
  },
  data() {
    return {
      editValue: this.value,
    };
  },
  computed: {
    compType() {
      if (
        ["radio", "check", "select", "cascader", "auto"].findIndex(
          (item) => item == this.type
        ) >= 0
      ) {
        return "dict";
      } else if (
        ["addre", "sfzh", "email", "mobile"].findIndex(
          (item) => item == this.type
        ) >= 0
      ) {
        return "custom";
      } else if (
        ["upload", "img"].findIndex((item) => item == this.type) >= 0
      ) {
        return "upload";
      } else {
        return "base";
      }
    },
  },
  watch: {
    editValue(val) {
      this.$emit("input", val);
      this.$emit('change',val)
    },
    value(val) {
      this.editValue=val
    },
  },
};
</script>
